<template>
  <div class="custom-resources-download" :style="borderStyle">
    <div class="custom-resources-header">
      <el-image :src="baseURL+column.backImage" />
      <div class="custom-article">
        <div class="custom-resources-body">
          <div class="header-title title-h1">
            {{ column.title }}
          </div>
          <div class="header-title title-h5">
            {{ column.fbt }}
          </div>
        </div>
      </div>
      <div class="custom-resources-statistical">
        <div class="custom-resources-body">
          <div class="custom-resources-content">
            <div class="statistical-left">
              <div class="statistical-content">
                <div class="statistical-article" :style="borderStyle">
                  <div class="statistical-article-center">
                    <div class="statistical-content">
                      <div class="content-body">
                        <div class="content-title">表单资源</div>
                        <div class="content-number" :style="borderStyle">
                          <label :style="borderStyle">{{
                            count[4].count === undefined ? 0 : count[4].count
                          }}</label>&nbsp;&nbsp;张
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="statistical-article-center">
                    <div class="statistical-content half">
                      <div class="content-body">
                        <div class="content-half">
                          <div class="content-title">累计下载次数</div>
                          <div class="content-number" :style="borderStyle">
                            <label :style="borderStyle">{{
                              count[0].count === undefined ? 0 : count[0].count
                            }}</label>&nbsp;&nbsp;次
                          </div>
                        </div>
                        <div class="content-half">
                          <div class="content-title">累计服务用户</div>
                          <div class="content-number" :style="borderStyle">
                            <label :style="borderStyle">{{
                              count[1].count === undefined ? 0 : count[1].count
                            }}</label>&nbsp;&nbsp;位
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="statistical-article-center">
                    <div class="statistical-content half">
                      <div class="content-body">
                        <div class="content-half">
                          <div class="content-title">服务部门</div>
                          <div class="content-number" :style="borderStyle">
                            <label :style="borderStyle">{{
                              count[3].count === undefined ? 0 : count[3].count
                            }}</label>&nbsp;&nbsp;个
                          </div>
                        </div>
                        <div class="content-half">
                          <div class="content-title">表单类型</div>
                          <div class="content-number" :style="borderStyle">
                            <label :style="borderStyle">{{
                              dict.zy_type.length === undefined ||
                                dict.zy_type.length === null
                                ? 0
                                : dict.zy_type.length
                            }}</label>&nbsp;&nbsp;种
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="statistical-right">
              <div class="statistical-content">
                <div
                  class="statistical-article statistical-bak"
                  :style="{ backgroundImage: 'url(' + bak + ')' }"
                >
                  <div
                    class="statistical-right-image statistical-bak"
                    :style="{ backgroundImage: 'url(' + headerImage + ')' }"
                  >
                    下载最多
                  </div>
                  <div class="statistical-right-li first">
                    {{ entity.fileName }}
                  </div>
                  <div class="statistical-right-li last">
                    下载次数：{{ entity.xzcs }}次
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="custom-resources-footer">
      <div class="custom-query-body">
        <div class="custom-resources-body">
          <div class="custom-resources-input">
            <div class="custom-query-line">
              <input
                v-model="query.blurry"
                placeholder="请输入内容"
                class="input-with-select"
              >
              <div class="query-button" @click="queryClick">
                <i class="el-icon-search" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="custom-article-li" style="height: 40px">
        <div class="custom-resources-body">
          <div class="custom-ul">
            <div
              :style="borderStyle"
              class="custom-ul-li"
              :class="active === '0' ? 'active' : ''"
              @click="changeMenu('0')"
            >
              全部
            </div>
            <div
              v-for="item in dict.zy_type"
              :key="item.id"
              :style="borderStyle"
              class="custom-ul-li"
              :class="active === item.value ? 'active' : ''"
              @click="changeMenu(item.value)"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
      <div class="custom-file-body">
        <div class="custom-resources-body flex">
          <el-row v-if="dataList" :gutter="20">
            <el-col
              v-for="(item, index) in dataList"
              :key="'s-' + index"
              :span="8"
              class="custom-col"
            >
              <div class="file-li" :style="borderStyle">
                <div class="file-image">
                  <el-image :src="getImage(item.ext)" />
                </div>
                <div class="file-content">
                  <div class="file-title" :style="borderStyle">
                    {{ item.fileName }}
                  </div>
                  <div class="file-footer" :style="borderStyle">
                    来源：{{ item.bmmc }}
                  </div>
                  <div class="file-footer">
                    <div class="file-date" :style="borderStyle">
                      创建时间：{{ item.createTime }}
                    </div>
                    <div
                      class="file-number"
                      :style="{ backgroundImage: 'url(' + dow + ')' }"
                    >
                      {{ item.xzcs }}次
                    </div>
                  </div>
                </div>
                <div class="file-download" @click="download(item)">
                  <i class="el-icon-download" />下载
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row v-else :gutter="20">
            <el-empty :image-size="100" />
          </el-row>
        </div>
      </div>
      <div class="custom-pager">
        <div class="custom-resources-body" style="text-align: center">
          <el-pagination
            :current-page.sync="query.page"
            :page-size="query.size"
            layout="prev, pager, next, jumper"
            :total="totalElements"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  count,
  guestCount,
  queryAllCustomPager,
  queryAllGuestCustomPager,
  queryMaxDownload,
  queryGuestMaxDownload,
  saveGuestDownload,
  saveDownload
} from '@/api/resource/index'
import { getToken } from '@/utils/auth'
import { layout } from '@/mixins/layout'
import { template } from '@/mixins/template'

export default {
  name: 'ResourcesTemplate', // 资源下载组件
  mixins: [layout, template],
  dicts: ['zy_type'],
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API.substring(
        0,
        process.env.VUE_APP_BASE_API.length - 1
      ),
      select: 'a',
      input: '',
      isGuest: true,
      image: require('@/assets/images/download.jpg'),
      bak: require('@/assets/images/bak_lm.jpg'),
      headerImage: require('@/assets/images/header_bak.png'),
      dow: require('@/assets/images/dow.png'),
      word: require('@/assets/images/word1.png'),
      excel: require('@/assets/images/xls.png'),
      pdf: require('@/assets/images/pdf_new.png'),
      count: [
        { count: 0 },
        { count: 0 },
        { count: 0 },
        { count: 0 },
        { count: 0 }
      ],
      active: '0',
      current: 1,
      totalElements: 0,
      dataList: [],
      entity: {},
      query: {
        page: 1,
        size: 9,
        type: '',
        blurry: ''
      },
      column: {
        backImage: ''
      }
    }
  },
  computed: {
    // borderStyle() {
    //   if (this.temp.sfxsbk === true) {
    //     return {
    //       border: '1px solid #eeeeee',
    //       backgroundColor: this.layoutTheme.menuBackground,
    //       color: this.layoutTheme.menuColor,
    //       borderRadius: this.layoutTheme.borderRadius
    //     }
    //   }
    //   if (this.temp.bkyy === true) {
    //     return {
    //       boxShadow: '0 2px 4px rgba(0, 0, 0, .12)',
    //       backgroundColor: this.layoutTheme.menuBackground,
    //       color: this.layoutTheme.menuColor,
    //       borderRadius: this.layoutTheme.borderRadius
    //     }
    //   }
    //   return {
    //     backgroundColor: this.layoutTheme.menuBackground,
    //     color: this.layoutTheme.menuColor,
    //     borderRadius: this.layoutTheme.borderRadius
    //   }
    // }
  },
  watch: {
    temp: {
      handler(newData, oldData) {
        if (getToken()) {
          this.isGuest = false
          this.query.sfkf = null
        } else {
          this.isGuest = true
          this.query.sfkf = true
        }
        this.query = {
          blurry: ''
        }
        if (this.showHeader) {
          const pzx = JSON.parse(newData.data.pzx)
          this.column = pzx
        } else {
          const pzx = JSON.parse(newData.pzx)
          this.column = pzx
        }
        if (undefined !== this.column.query && this.column.query !== null) {
          this.queryList = this.column.query
        } else {
          this.queryList = []
        }
        this.initCount()
        this.initData()
        this.initMaxEntity()
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    queryClick() {
      this.query.page = 1
      this.initData()
    },
    changeMenu(data) {
      this.active = data
      if (data === '0') {
        this.query.type = null
      } else {
        this.query.type = data
      }
      this.initData()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.initData()
    },
    handleSizeChange(val) {
      this.query.size = val
      this.initData()
    },
    getImage(data) {
      if (data === 'doc' || data === 'docx') {
        return this.word
      }
      if (data === 'xls' || data === 'xlsx') {
        return this.excel
      }
      if (data === 'pdf') {
        return this.pdf
      }
      return this.word
    },
    initCount() {
      if (this.isGuest) {
        guestCount().then(res => {
          const { data } = res
          this.count = data
        })
      } else {
        count().then(res => {
          const { data } = res
          this.count = data
        })
      }
    },
    initData() {
      this.query.size = 9
      if (this.isGuest) {
        queryAllGuestCustomPager(this.query).then(res => {
          const { data } = res
          this.dataList = data.data
          this.totalElements = data.totalElements
        })
      } else {
        queryAllCustomPager(this.query).then(res => {
          const { data } = res
          this.dataList = data.data
          this.totalElements = data.totalElements
        })
      }
    },
    initMaxEntity() {
      if (this.isGuest) {
        queryGuestMaxDownload().then(res => {
          const { data } = res
          if (data !== null) {
            this.entity = data
          } else {
            this.entity = Object.assign({})
          }
        })
      } else {
        queryMaxDownload().then(res => {
          const { data } = res
          if (data !== null) {
            this.entity = data
          } else {
            this.entity = Object.assign({})
          }
        })
      }
    },
    download(data) {
      if (undefined !== data && data !== null) {
        this.saveObject({ file: data.id })
        window.open(data.url, '_blank')
      }
    },
    saveObject(data) {
      if (this.isGuest) {
        saveGuestDownload(data).then(res => {
          this.initData()
          this.initCount()
          this.initMaxEntity()
        })
      } else {
        saveDownload(data).then(res => {
          this.initData()
          this.initCount()
          this.initMaxEntity()
        })
      }
    }
  }
}
</script>

<style scoped>
.custom-resources-download {
  width: 100%;
  height: 100%;
  position: relative;
}
.custom-resources-content {
  width: 100%;
  height: 100%;
}
.custom-resources-header {
  width: 100%;
  height: 440px;
  position: relative;
}
.custom-resources-header .el-image {
  width: 100%;
  height: 440px;
}
.custom-article {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.custom-resources-statistical {
  position: absolute;
  top: 354px;
  left: 0px;
  right: 0px;
  height: 160px;
  z-index: 10;
}
.custom-resources-body {
  padding: 0px 65px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.custom-resources-body .custom-resources-content {
  display: flex;
  flex-flow: row nowrap;
}
.header-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-family: Microsoft YaHei;
}
.title-h1 {
  font-size: 32px;
  font-weight: bold;
  color: #212a39;
  margin-top: 122px;
}
.title-h5 {
  color: #6b6f8c;
  font-weight: 400;
  font-size: 16px;
}
.statistical-right {
  flex: 0 1 auto;
  width: 330px;
  height: 100%;
}
.statistical-left {
  flex: 1 1;
  height: 100%;
}
.statistical-content {
  width: 100%;
  height: 100%;
}
.statistical-left .statistical-content {
  padding-right: 20px;
  box-sizing: border-box;
}
.statistical-article-center .statistical-content {
  padding-top: 20px;
  padding-bottom: 20px;
  line-height: 120px;
}
.statistical-article {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.statistical-article-center {
  flex: 0 1 auto;
  height: 100%;
  width: 33.333%;
  position: relative;
  padding-left: 5%;
  box-sizing: border-box;
}
.statistical-article-center:not(:first-child)::before {
  content: " ";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 0px;
  width: 1px;
  background-color: #f4f4f4;
}
.content-body {
  width: 100%;
  height: 100%;
}
.statistical-content .content-body {
  display: flex;
  flex-flow: row nowrap;
}
.half .content-body {
  display: flex;
  flex-flow: column nowrap;
}
.content-title {
  flex: 1 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 100%;
  text-align: left;
  font-size: 16px;
}
.content-number {
  flex: 0 1 auto;
  width: 100px;
  height: 100%;
  text-align: right;
  font-size: 13px;
  color: #6b6f8c;
  font-weight: 400;
}
.content-number label {
  color: #212a39;
  font-size: 18px;
  font-weight: bold;
}
.content-half {
  width: 100%;
  height: 60px;
  flex: 0 1 auto;
  display: flex;
  flex-flow: row nowrap;
  line-height: 60px;
}
.statistical-bak {
  background-size: 100% 100%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  position: relative;
}
.statistical-right-image {
  position: absolute;
  height: 50px;
  width: 111px;
  top: 0px;
  right: 0px;
  left: 0px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  line-height: 40px;
  text-indent: 5px;
}
.statistical-right-li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  box-sizing: border-box;
  font-size: 18px;
  color: #212a39;
  font-family: Microsoft YaHei;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.statistical-article.statistical-bak {
  display: block;
}
.statistical-right-li.first {
  margin-top: 50px;
}
.statistical-right-li.last {
  font-size: 12px;
  font-weight: 400;
  color: #212a39;
  margin-top: 20px;
}
.custom-resources-footer {
  width: 100%;
  height: auto;
  margin-top: 110px;
}
.el-select >>> .el-input {
  width: 130px;
}
.custom-query-body {
  height: 80px;
  width: 100%;
  margin-top: 80px;
}
.custom-article-li {
  height: 80px;
  width: 100%;
}
.custom-resources-input {
  width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
}
.custom-ul {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  display: flex;
  flex-flow: row nowrap;
}
.custom-ul-li {
  flex: 0 1 auto;
  width: 120px;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.custom-ul-li:not(:first-child) {
  margin-left: 5px;
}
.custom-ul-li.active {
  border: 1px solid #276eed;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #276eed;
}
.custom-file-body {
  width: 100%;
  height: 554px;
}
.file-li {
  width: 100%;
  height: 148px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-flow: row nowrap;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.file-image {
  flex: 0 1 auto;
  height: 100%;
  width: 108px;
}
.file-image .el-image {
  width: 63px;
  margin-top: 22px;
  margin-left: 22px;
}
.file-content {
  flex: 1 1 auto;
  height: 100%;
  padding-right: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  padding-left: 5px;
}
.file-title {
  flex: 0 1 auto;
  width: 100%;
  height: 85px;
  padding-top: 20px;
  box-sizing: border-box;
  line-height: 20px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #212a39;
}
.file-footer {
  flex: 0 1 auto;
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #a1a4bb;
  display: flex;
  flex-flow: row nowrap;
}
.file-date {
  flex: 1 1 auto;
  height: 100%;
  text-align: left;
}
.file-number {
  flex: 0 1 auto;
  height: 100%;
  text-align: right;
  width: 60px;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
.custom-col {
  margin-top: 20px;
}
.custom-pager {
  width: 100%;
  height: 40px;
  margin-top: 20px;
}
.file-download {
  position: absolute;
  height: 35px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #276eed;
  line-height: 35px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  display: none;
}
.file-li:hover .file-download {
  display: block;
}
.custom-query-line {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  border: 1px solid #00a0e9;
  padding: 5px 50px;
  box-sizing: border-box;
  position: relative;
}
.custom-query-line input {
  border: none;
  width: 100%;
  height: 100%;
  outline: none;
  position: relative;
}
.query-button {
  position: absolute;
  width: 60px;
  height: 49px;
  top: 0px;
  right: 0px;
  border-radius: 0px 25px 25px 0px;
  background-color: #00a0e9;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
.query-button:hover {
  background-color: #409eff;
}
</style>
